<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import VueResizable from 'vue-resizable'

import { isArrayString } from '~/utils/string.js'
import WorkspaceTableDocParam from './table/docParam.vue'

onMounted(() => {})

const record: any = ref(
  {
    requestparam: '',
    requestdemo: '',
    responseparam: '',
    responsedemo: '',
  },
)
// 请求参数
const requestRef = ref()
const requestList: any = ref([])
const requestSchema = ref('table')
const requestKey = ref(0)
function handleRequestSchema(schema: string) {
  if (schema === 'json') {
    record.value.requestparam = JSON.stringify(requestList.value, null, 2)
  }
  else {
    if (!isArrayString(record.value.requestparam)) {
      ElMessage.error('请求参数不符合格式')
      return
    }
    requestList.value = JSON.parse(record.value.requestparam)
  }
  requestSchema.value = schema
  requestKey.value++
}
function handleRequestChange(list: any) {
  requestList.value = list
  record.value.requestparam = JSON.stringify(list)
}
function handleRequestAdd() {
  requestRef.value.handleAdd()
}

// 返回参数
const responseRef = ref()
const responseList: any = ref([])
const responseSchema = ref('table')
const responseKey = ref(0)
function handleResponseSchema(schema: string) {
  if (schema === 'json') {
    record.value.responseparam = JSON.stringify(responseList.value, null, 2)
  }
  else {
    if (!isArrayString(record.value.responseparam)) {
      ElMessage.error('请求参数不符合格式')
      return
    }
    responseList.value = JSON.parse(record.value.responseparam)
  }
  responseSchema.value = schema
  responseKey.value++
}

function handleResponseChange(list: any) {
  responseList.value = list
  record.value.responseparam = JSON.stringify(list)
}
function handleResponseAdd() {
  responseRef.value.handleAdd()
}
</script>

<template>
  <main class="mix-splitter h-full w-full overflow-auto px-1">
    <VueResizable :active="['b']" :height="500" :min-height="32">
      <section class="mt-2 h-full overflow-hidden text-sm">
        <header class="mb-2 h-7 flex items-center justify-between">
          <div class="color-[#171b1f]">
            请求参数
          </div>
          <div>
            <el-button size="small" :disabled="requestSchema === 'json'" style="height: 28px;" @click="handleRequestAdd">
              添加参数
            </el-button>
            <el-button v-if="requestSchema === 'json'" type="primary" size="small" style="height: 28px;" @click="handleRequestSchema('table')">
              列表视图
            </el-button>
            <el-button v-else type="primary" size="small" style="height: 28px;" @click="handleRequestSchema('json')">
              脚本视图
            </el-button>
          </div>
        </header>
        <section v-show="requestSchema === 'table'" class="w-full" style="height: calc(100% - 44px)">
          <WorkspaceTableDocParam ref="requestRef" :list="requestList" @change="(val:any) => handleRequestChange(val)" />
        </section>
        <section v-show="requestSchema === 'json'" class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
          <JsonEditor :key="requestKey" v-model="record.requestparam" language="json" />
        </section>
      </section>
    </VueResizable>
    <VueResizable :active="['b']" :height="500" :min-height="32">
      <section class="mt-2 h-full overflow-hidden text-sm">
        <header class="mb-2 h-7 flex items-center justify-between">
          <div class="color-[#171b1f]">
            请求示例
          </div>
        </header>
        <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
          <JsonEditor v-model="record.requestdemo" language="json" />
        </section>
      </section>
    </VueResizable>
    <VueResizable :active="['b']" :height="500" :min-height="32">
      <section class="mt-2 h-full overflow-hidden text-sm">
        <header class="mb-2 h-7 flex items-center justify-between">
          <div class="color-[#171b1f]">
            返回参数
          </div>
          <div>
            <el-button size="small" :disabled="responseSchema === 'json'" style="height: 28px;" @click="handleResponseAdd">
              添加参数
            </el-button>
            <el-button v-if="responseSchema === 'json'" type="primary" size="small" style="height: 28px;" @click="handleResponseSchema('table')">
              列表视图
            </el-button>
            <el-button v-else type="primary" size="small" style="height: 28px;" @click="handleResponseSchema('json')">
              脚本视图
            </el-button>
          </div>
        </header>
        <section v-show="responseSchema === 'table'" class="w-full" style="height: calc(100% - 44px)">
          <WorkspaceTableDocParam ref="responseRef" :list="responseList" @change="(val:any) => handleResponseChange(val)" />
        </section>
        <section v-show="responseSchema === 'json'" class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
          <JsonEditor :key="responseKey" v-model="record.responseparam" language="json" />
        </section>
      </section>
    </VueResizable>
    <VueResizable :active="['b']" :height="500" :min-height="32">
      <section class="mt-2 h-full overflow-hidden text-sm">
        <header class="mb-2 h-7 flex items-center justify-between">
          <div class="color-[#171b1f]">
            返回示例
          </div>
        </header>
        <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
          <JsonEditor v-model="record.responsedemo" language="json" />
        </section>
      </section>
    </VueResizable>
  </main>
</template>

<style lang="scss" scoped>
@use '~/assets/splitpanes.scss';
</style>
